<!-- 人事异动-异动记录 -->
<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew title="异动记录" :showBack="false"></pageHeaderNew>
    </template>
    <ConditionBox :margin-bottom="20">
      <template #left>
        <a-space>
          <div style="display: flex">
            <a-select :options="options" v-model="keyWold" />
            <a-input-search
              @press-enter="search"
              @search="search"
              v-model="keyWoldValue"
              placeholder="请输入"
            />
          </div>
          <a-input-search
            @press-enter="search"
            @search="search"
            v-model="phoneData"
            placeholder="输入手机号码搜索"
          />
          <a-button @click="reset">重置</a-button>
        </a-space>
      </template>
      <template #right>
        <a-button type="outline" @click="exportSettingVisible = true"
          >导出</a-button
        >
      </template>
    </ConditionBox>
    <TableTurn :tableData="getTableData" :args="args" ref="tableRef">
      <a-table-column :width="80">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column :width="150" title="姓名" data-index="name">
      </a-table-column>
      <a-table-column :width="150" title="工号" data-index="jobNum">
      </a-table-column>
      <a-table-column :width="150" title="新部门" data-index="department">
        <template #cell="{ record }">
          {{ dataList?.organizationList.find((el: any) => el.id == record.department)?.name }}
        </template>
      </a-table-column>
      <a-table-column :width="150" title="新职位" data-index="position">
        <template #cell="{ record }">
          {{ dataList?.positionList.find((el: any) => el.id == record.position)?.name }}
        </template>
      </a-table-column>
      <a-table-column :width="150" title="异动类型" data-index="type">
        <template #cell="{ record }">
          {{ TRANSACTION.find((el: any) => el.id == record.type)?.label }}
        </template>
      </a-table-column>
      <a-table-column :width="150" title="异动原因" data-index="reason">
        <template #cell="{ record }">
          {{ dataList?.transactionTypeList?.find((el: any) => el.id == record.reason)?.reason }}
        </template>
      </a-table-column>
      <a-table-column :width="150" title="生效日期" data-index="effectTime">
      </a-table-column>
      <a-table-column
        :width="150"
        title="办理日期"
        data-index="applicationTime"
      ></a-table-column>
      <a-table-column :width="150" title="审批编号" data-index="">
      </a-table-column>
      <a-table-column :width="150" title="审批状态" data-index="">
      </a-table-column>
      <a-table-column :width="150" fixed="right" title="操作">
        <template #cell="{ record }">
          <a-tooltip content="查看详情">
            <icon-font
              type="icon-details-def"
              :size="26"
              :style="{
                cursor: 'pointer',
                marginRight: '10px'
              }"
              @click="goDetail(record)"
            />
          </a-tooltip>
        </template>
      </a-table-column>
    </TableTurn>
  </ContentCard>
</template>
<script setup lang="tsx">
import { Message } from '@arco-design/web-vue';
import { useRouter } from 'vue-router';
import TableTurn, { type paramsType } from '@/components/TableTurn/index.vue';
import { Modal, Button } from '@arco-design/web-vue';
import { GetTransactionRecordList } from '@/apis/management/personnel/changeManagement/transactionManagement';
import { getListData, IneedSwitchArr } from '@/utils/getAllSwitchListData';
import { TRANSACTION } from '@/utils/constants';

// 选择器配置
const args = reactive({
  rowSelection: {
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false
  },
  stripe: true
});
let tableRef = ref();
/* 储存选择的数据 */
const selectedList = computed(() => tableRef.value.selectedList);
const router = useRouter();

const getTableData = async (pageData: any) => {
  try {
    const res = await GetTransactionRecordList({
      isDone: 1,
      ...pageData
    });
    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};

const needSwitchArr: IneedSwitchArr[] = [
  'organization',
  'position',
  'transactionType'
];
const dataList = ref(); // 储存要转换的数据列表
const init = async () => {
  try {
    dataList.value = await getListData(needSwitchArr);
    console.log('===========init=========================');
    console.log(dataList.value);
    console.log('====================================');
  } catch (error: unknown) {
    console.log(error);
  }
};
init();
// 储存要特殊处理的数据
const showInfoData = reactive({
  data: {
    deptList: [], // 组织列表数据
    workPlaceList: [], // 工作地点数据
    positionList: [] // 职位列表数据
  }
});

const goDetail = (data: any) => {
  router.push({
    name: 'TransactionRecordDetail',
    params: { id: data.id }
  });
};

let singleSelectId = 0; // 储存单个item移动、合并的id
let singleSelectData = {}; // 储存单个item移动、合并的值
// 点击三个小点事件
const singleControl = (record: any) => {
  singleSelectData = record;
  singleSelectId = record.id;
};

// 模糊查询参数
const options = reactive([
  { label: '姓名', value: 'name' },
  { label: '职位', value: 'positionName' }
]);
// 模糊类型
const keyWold = ref('name');
// 模糊查询值
const keyWoldValue = ref('');

const phoneData = ref('');
const search = () => {
  refresh();
};

// 重置数据
const reset = () => {
  keyWold.value = 'name';
  keyWoldValue.value = '';
  phoneData.value = '';
  refresh();
};

// 刷新列表
const refresh = (page?: any) => {
  tableRef.value.loadData(page);
};
</script>
<style lang="less" scoped>
.wrap {
  padding: 10px 20px;

  // 弄出一个小的圆形
}
</style>
